/**
* 头部菜单
*/
<template>
  <div id="navcon">
    <el-row>
      <!--<el-col :span="4">
        大学生街舞网站
      </el-col>-->
      <el-col :span="12">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#1a1a1a"
                text-color="#fff"
                active-text-color="#f3cd20">
          <el-menu-item index="1">视频</el-menu-item>
          <el-menu-item index="2">公告</el-menu-item>
          <el-menu-item index="3">关于我们</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="12">
        <ul class="fr" v-if="!hasLogin">
          <li class="header-user-item fl">
            <i class="el-icon-user-solid"></i>
            <span @click="login('login')" class="header-user-text">登录</span>
            |
            <span @click="login('signIn')" class="header-user-text">注册</span>
          </li>
        </ul>
        <ul class="fr" v-else>
          <li class="fl" @mouseenter="mouseEnter" @mouseleave="mouseOut">
            <div class="pr">
              <div class="header-user-text">
                <img class="avatar" :src="userInfo.avatarUrl==null?'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png':userInfo.avatarUrl">
                <span>{{userInfo.userName}}</span>
              </div>
              <el-collapse-transition>
                <div class="header-user-menu" v-show="isActive">
                  <ul>
                    <li @click="usersBtn('/users')">
                      <a>
                        个人中心
                      </a>
                    </li>
                    <li @click="usersBtn('/users/uploads')">
                      <a>
                        视频投稿
                      </a>
                    </li>
                    <li @click="usersBtn('/users/manage')">
                      <a>
                        投稿管理
                      </a>
                    </li>
                    <li v-if="hasLogin && userInfo.userType == 0" @click="usersBtn('/admin')">
                      <a>
                        管理员页面
                      </a>
                    </li>
                    <li>
                      <div @click="signOut">
                        退出
                      </div>
                    </li>
                  </ul>
                </div>
              </el-collapse-transition>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {getStore, removeStore, delCookie} from "../utils/util";
import {Message, MessageBox} from "element-ui";
import {Get} from "../api/axiosFun";
import {signOut} from "@/api/loginFun";

export default {
  name: 'navcon',
  data() {
    return {
      hasLogin: false,
      userInfo: null,
      activeIndex: '1',
      isActive: false
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    let userInfo = getStore("userInfo");
    if (userInfo) {
      this.userInfo = userInfo;
      this.hasLogin = true;
    }

    //监听登录
    this.$root.Bus.$on('userInfo', value => {
      if (value) {
        this.userInfo = value;
        this.hasLogin = true;
      }
    })

    let routepath = this.$route.path;
    if (routepath === '/'){
      this.activeIndex = '1';
    }else if (routepath === '/articles') {
      this.activeIndex = '2';
    }else if (routepath === '/about') {
      this.activeIndex = '3';
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          this.$router.push({path: '/'})
              break;
        case '2':
          this.$router.push({path: '/articles'})
              break;
        case '3':
          this.$router.push({path: '/about'})
              break;
        default:
          break;
      }
    },
    login(value) {
      this.$root.Bus.$emit('loginDialog', {
        centerDialogVisible: true,
        activeName: value
      })
    },
    signOut() {
      signOut({}).then(res=>{
        if (res.status == 200){
          removeStore("userInfo");
          delCookie("token");
          window.location.reload();
        }
      }).catch(err=>{
        Message.error(err.message);
      })
    },
    mouseEnter() {
      this.isActive = true
    },
    mouseOut() {
      this.isActive = false
    },
    usersBtn(value) {
      let routeUrl = this.$router.resolve({
        path: value
      });
      this.isActive = false
      window.open(routeUrl.href, '_blank');

    }
  }
}
</script>
<style scoped>
  #navcon{
    font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
    display: block;
    height: 100%;
    margin: 0 auto;
    font-size: 16px;
    width: 1340px;
    text-align: center;
  }
  li{
    list-style: none;
  }
  .el-menu-demo{
    width: 50%;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: solid 1px #1a1a1a;
  }
  .fr{
    padding: 0px;
    margin: 0px;
    float: right;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-user-item{
    margin: auto;
    padding: 0 14px;
  }
  .fl {
    float: left;
  }
  .header-user-text{
    padding: 0 4px;
    cursor: pointer;
  }
  .header-user-text:hover{
    color: #f3cd20;
    padding: 0 4px;
    cursor: pointer;
  }
  .avatar{
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 50%;
    cursor: pointer;
  }
  .pr{
    position: relative;
  }
  .header-user-menu ul{
    padding: 0;
  }
  .header-user-menu ul li:hover{
    color: #f3cd20;
    cursor: pointer;
  }
  .header-user-menu ul li a{
    text-decoration: none;
  }

  .header-user-menu{
    position: absolute;
    top:60px;
    left:0px;
    width: 160px;
    padding-top: 15px;
    background: #1c1c1c;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 3px 5px 0 #000;
    transform: translate3d(0,-10px,0);
    transition: all .25s ease;
    color: #ffffff;
  }

</style>
